import React, { FC } from 'react'
import { NavBar, Space, Toast, Popover } from 'antd-mobile'
import {
  SearchOutline, MoreOutline, TeamOutline, LeftOutline, EnvironmentOutline, ScanningOutline, FaceRecognitionOutline,
} from 'antd-mobile-icons'
import { useLocation, useNavigate } from 'react-router-dom'
import { Action } from 'antd-mobile/es/components/popover'



const MyHeader: FC<any> = ({
  title,
  noback, // 控制左侧按钮是否显示 默认false 表示显示
  children
}) => {
  const router = useNavigate()
  const { pathname } = useLocation()
  const actions: Action[] = [
    { key: '/scan', icon: <ScanningOutline />, text: '扫一扫' },
    { key: '/city', icon: <EnvironmentOutline />, text: '定位城市' },
    { key: '/main/mine', icon: <TeamOutline />, text: '个人中心' },
    { key: '/login', icon: <FaceRecognitionOutline />, text: '登录' },
  ]
  // 右侧自定义
  const right = (
    <div style={{ fontSize: 24 }}>
      <Space style={{ '--gap': '16px' }}>
        {
          pathname != '/search' && <SearchOutline onClick={() => router('/search')} />
        }

        <Popover.Menu
          actions={actions}
          placement='bottom-start'
          onAction={(node: any) => router(node.key)}
          trigger='click'
        >
          <MoreOutline />
        </Popover.Menu>
      </Space>
    </div>
  )

  // 左侧自定义
  const left = (
    !noback ? children ? children : <div style={{ fontSize: '20px', marginLeft: '-20px' }} onClick={() => router(-1)}>
      <LeftOutline />
    </div> : null
  )


  return (
    <div style={{ position: 'sticky', top: '-1px', zIndex: '1000', backgroundColor: '#fff' }}>
      <NavBar right={right} backArrow={false} left={left}>
        {title}
      </NavBar>
    </div>
  )
}

export default MyHeader
